/*
 * Copyright 2012-2018 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "variables";

$trace-point-normal: $gt-yellow;
$trace-point-active: darken($gt-blue, 10%);
$trace-point-error: $gt-red;

.gt-chart-controls {
  @extend .clearfix;
  position: relative;
  // z-index 800 is needed to keep the buttons in front of the chart spinner overlay
  z-index: 800;
  font-size: 20px;
  // so it doesn't affect layout, e.g. when there are other controls
  height: 0;
  top: -21px;
}

.gt-chart-button {
  color: #7d7358;
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 3px; // for slightly rounded focus ring
  line-height: 1; // needed for a snug focus ring
  @include gt-focus-ring;
}

.gt-chart-button:hover {
  color: darken(#7d7358, 8%);
}

.gt-chart-container {
  position: relative;
  height: 300px;
  // need min width, otherwise sometimes it gets flot error:
  // "Invalid dimensions for plot, width = 0, height = 0"
  min-width: 100px;
}

.gt-chart-dimensions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gt-chart-panel {
  // pointer-events: none is to allow scrollwheel events to pass through to flot in order to handle
  // rapid zooming and to prevent the browser from intercepting rapid ctrl + scrollwheel and doing
  // browser level zoom
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.gt-chart-warning {
  display: inline-block;
  padding: 10px 30px;
  color: $gt-red;
  background-color: $gt-light-red-background;
  border-radius: 6px;
  font-weight: bold;
}

.gt-chart-no-data {
  display: inline-block;
  color: #333;
  background-color: #ddd;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 35px;
  margin-bottom: 6px;
  border-radius: 6px;
}

.gt-chart-help {
  padding: 4px 35px;
  background-color: #eee;
  border-radius: 6px;
}

.gt-trace-point-normal {
  border-color: $trace-point-normal;
}

.gt-trace-point-error {
  border-color: $trace-point-error;
}

.gt-trace-point-active {
  border-color: $trace-point-active;
}

.legendColorBox {
  padding-right: 2px;
}

.legendLabel {
  // this is to match color of flot axis ticks/labels (see jquery.flot.js)
  color: #545454;
}

.gt-chart-tooltip {
  font-size: 14px;
  color: #444;
}

.flot-text {
  font-size: 13px !important;
}

.gt-zoom-out:focus {
  text-decoration: none;
  color: $gt-blue;
}
